<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/myfans.css" />
	</head>
	<body>
		<header>
			<h1 class="mui-title">我的粉丝</h1>
		</header>
		<div id="tab">
			<ul id="tabul" class="space-between">
				<li class="active">直接客户</li>
				<li>间接客户</li>
			</ul>
		</div>
		<div id="coupon">
			<ul class="couponbox">
				<li class="space-between">
					<div class="headmain flex">
						<img src="img/fanshead.png">
						<div class="headtext">
							<h3>姚博银</h3>
							<p>加入时间：2018.2.27</p>
							<p>收益截止：2019.2.26</p>
						</div>
					</div>
					<div class="money">
						<p>返现：<span>+30.00</span></p>
						<p>消费：<span>1000.00</span></p>
					</div>
				</li>
				<li class="space-between">
					<div class="headmain flex">
						<img src="img/fanshead.png">
						<div class="headtext">
							<h3>姚博银</h3>
							<p>加入时间：2018.2.27</p>
							<p>收益截止：2019.2.26</p>
						</div>
					</div>
					<div class="money">
						<p>返现：<span>+30.00</span></p>
						<p>消费：<span>1000.00</span></p>
					</div>
				</li>
			</ul>
			<ul class="couponbox">
				<li class="space-between">
					<div class="headmain flex">
						<img src="img/fanshead.png">
						<div class="headtext">
							<h3>姚博银</h3>
							<p>加入时间：2018.2.27</p>
							<p>收益截止：2019.2.26</p>
						</div>
					</div>
					<div class="money">
						<p>返现：<span>+30.00</span></p>
						<p>消费：<span>1000.00</span></p>
					</div>
				</li>
			</ul>
		</div>
		<div class="bottom-menu">
			<ul class="space-around">
				<li id="home"><img src="img/home.svg" ><p>首页</p></li>
				<li><img src="img/classify.svg" ><p>分类</p></li>
				<li class="sactive"><span id="sp">文体活动</span><p>报名</p></li>
				<li><img src="img/shopping.svg" ><p>购物车</p></li>
				<li><img src="img/my.svg" ><p>我的</p></li>
			</ul>
		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function tab(){
			var tabul = document.getElementById('tabul');
			var tabli = tabul.getElementsByTagName('li');
			var boxul= document.getElementsByClassName('couponbox');
			var n = 0;
			
			boxul[0].style.display='block';
			
			for(var i =0; i<tabli.length;i++){
				tabli[i].index=i;
				tabli[i].addEventListener('click',function(){
					boxul[n].style.display='none';
					boxul[this.index].style.display='block';
					tabli[n].classList.remove('active');
					this.classList.add('active');
					n=this.index;
				})
			}
		}
		 tab()
	</script>
</html>
